<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { UserIndexUrl, UserEditUrl } from '/@/views/org/mapping.json'
import UserForm from './component/user-form.vue'
import UserDeptList from '/@/views/org/user-dept/component/user-dept-list.vue'
import { redirectPath } from '/@/utils/router-kit'

const router = useRouter();
const UserFormRef = ref();
const UserDeptListRef = ref();
const UserFormState = reactive({
    userId: router.currentRoute.value.params.id as string,
    unitId: router.currentRoute.value.query.unitId as string,
    onBackButtonClick: () => router.push({ path: UserIndexUrl }),
    onSaveButtonClick: () => {
        UserFormRef.value.save();
    },
    /**质量验收卡新增成功 跳转页面 */
    onAddFormSuccess: (formData: any) => {
        redirectPath(UserEditUrl + formData.userId)
    },
    //加载用户部门表格
    loadUserDeptTable: () => {
        const userDeptPageTableRef = UserDeptListRef.value.getUserDeptPageTableRef() as PageTableExpose;
        userDeptPageTableRef.loadTable();
    }
})

onMounted(() => {
    if (UserFormState.userId) UserFormState.loadUserDeptTable();
})
</script>
<template>
    <jxtech-basic-header :breadcrumbMappingUrl="UserIndexUrl">
        <template #extra>
            <jxtech-save-button @click="UserFormState.onSaveButtonClick"></jxtech-save-button>
            <jxtech-back-button @click="UserFormState.onBackButtonClick"></jxtech-back-button>
        </template>
    </jxtech-basic-header>
    <el-alert
        v-if="!UserFormState.userId"
        title="用户密码提示"
        class="mb10"
        type="success"
        description="用户密码必须由大写，小写字母以及数字三种字符组成，且长度为8-15之间"
        show-icon
    ></el-alert>
    <el-card  class="mb10">
        <template #header>
            <span class="jxtech-card-title">基本信息</span>
        </template>
        <user-form
            ref="UserFormRef"
            :user-id="UserFormState.userId"
            :unit-id="UserFormState.unitId"
            @add-success="UserFormState.onAddFormSuccess"
        ></user-form>
    </el-card>
    <template v-if="UserFormState.userId">
        <user-dept-list ref="UserDeptListRef" :user-id="UserFormState.userId"></user-dept-list>
    </template>
</template>